<template>
  <div class="box">
    <dynamics-filter
      :setting="setting"
      label-width="auto"
      toggle-show
      @query="handleQuery"
    />
  </div>
</template>

<script>
import { ref } from 'vue'
import { DynamicsFilter } from '@bairong/vix'

export default {
  components: {
    DynamicsFilter
  },
  setup() {
    const setting = ref([
      {
        name: 'name', label: '策略目标', type: 'select', options: []
      },
      {
        name: 'name', label: '特色客群', type: 'select', options: []
      },
      {
        name: 'name', label: '客户等级', type: 'select', options: []
      },
      {
        name: 'name', label: '策略场景', type: 'select', options: []
      },
      {
        name: 'name', label: '适用产品', type: 'select', options: []
      },
      {
        name: 'name', label: '适用渠道', type: 'select', options: []
      },
      {
        name: 'name', label: '提出机构', type: 'select', options: []
      },
      {
        name: 'name', label: '优先级', type: 'select', options: []
      },
      {
        name: 'name', label: '适用客群', type: 'select', options: []
      },
      { name: 'name', label: '策略名称', type: 'input' },
      {
        name: 'birthDay',
        label: '发起日期',
        type: 'dateRange',
        custom: true,
        selected: true,
        props: {
          defaultTime: ['00:00:00', '23:59:59']
        },
        convert: {
          format: 'YYYY-MM-DD HH:mm:ss'
        }
      }
    ])

    const handleQuery = query => {
      console.log(DynamicsFilter.libs.getQueryParameters(query))
    }

    return {
      setting,
      handleQuery
    }
  }
}
</script>

<style>
.box{
  background: #fff;
  padding: 10px;
}
</style>
